<template>
    <div class="jianzhan-content">
        <div class="content">
            <el-button size="small" type="primary" @click="open">Add Employee</el-button>
            <Search>
                <el-input v-model="key" class="input" size="small" placeholder="Search by employee name"
                          prefix-icon="el-icon-search"/>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="employeeList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="contactName"
                            label="Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="jobPosition"
                            label="Position"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="supervisorName"
                            label="Supervisor Name">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="Phone">
                    </el-table-column>
                    <el-table-column
                        label="Operate"
                     >
                        <template slot-scope="employee">
                            <el-button type="primary" @click="editEmployee(employee.row)">Edit</el-button>
                            <el-button type="danger" @click="deleteEmployee(employee.row.id)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"/>
                </div>
            </div>
        </div>
        <el-dialog
                title="Contact"
                :visible.sync="dialogVisible"
                append-to-body
                width="100%"
               >
            <el-form ref="form" rules="rule" :model="employee" label-width="150px" inline>
                <el-form-item label="Name" prop="contactName">
                    <el-input v-model="employee.contactName" placeholder="Contact Name"></el-input>
                </el-form-item>
                <el-form-item label="Job Position" prop="jobPosition">
                    <el-input v-model="employee.jobPosition" placeholder="Job Position"></el-input>
                </el-form-item>
                <el-form-item label="Supervisor Name" prop="supervisorName">
                    <el-input v-model="employee.supervisorName" placeholder="Supervisor Name"></el-input>
                </el-form-item>
                <el-form-item label="phone" prop="phone">
                    <el-input v-model="employee.phone" placeholder="phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="submitForm">Confirm</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import mixins from '../../util/mixins'
    import {getCustomerEmployee,addContact,modContact,deleteSpecCustomer} from "../../api/customer";
    import Search from '@/components/common/search'
    import {ERROR_OK} from "../../util/config";
    export default {
        name: "spec-customer",
        mixins:[mixins],
        data(){
            return {
                key: '',
                employee: {
                    id:'',
                    contactName:'',
                    jobPosition:'',
                    supervisorName:'',
                    phone:''
                },
                rule:{
                    contactName:[{required:true}],
                    jobPosition:[{required:true}],
                    supervisorName:[{required:true}],
                    phone:[{required:true}]
                },
                list:[],
                dialogVisible: false,
            }
        },
        props:{
            customerId:Number
        },
        created(){
            this.getEmployeeList(this.customerId);
        },
        computed:{
            employeeList(){
                return this.list.filter(item => item.contactName.toLowerCase().indexOf(this.key.toLowerCase())>-1)
            }
        },
        methods:{
            async submitForm(){
                this.$refs.form.validate(async valid=>{
                    if ( valid ) {
                        const {id} = this.employee;
                        if(id) {
                            delete this.employee.createTime;
                            delete this.employee.updateTime;
                            const {status,msg} = await modContact({...this.employee,customerId:this.customerId});
                            if(status === ERROR_OK) {
                                this.$notify.success('Modify Success');
                            }else{
                                this.$message.error(msg)
                            }
                        } else {
                            const {status,msg} = await addContact({...this.employee,customerId:this.customerId});
                            if(status === ERROR_OK) {
                                this.$notify.success('Add Success');
                                this.getEmployeeList(this.customerId);
                            } else {
                                this.$message.error(msg)
                            }
                        }
                        this.dialogVisible = false
                    }
                })
            },
            clear(){
                this.employee =  {
                    id:'',
                    customerId:'',
                    contactName:'',
                    jobPosition:'',
                    supervisorName:'',
                    phone:''
                }
            },
            open(){
                this.clear();
                this.dialogVisible = true
            },
            editEmployee(employee){
                this.employee = {...employee};
                this.dialogVisible = true
            },
            async deleteEmployee(id){
                const {status } = await deleteSpecCustomer(id);
                if (status === ERROR_OK ) {
                    this.getEmployeeList(this.customerId);
                }
            },
            async getEmployeeList(customerId){
                const {status,data} = await getCustomerEmployee(customerId);
                if(status === ERROR_OK) {
                    this.list = data;
                } else {
                    this.list = []
                }
            }
        },
        watch:{
            customerId(id){
                this.getEmployeeList(id);
            },
            list(list) {
                this.total = list.length
            }
        },
        components:{
            Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
</style>